<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组创建方式(Array create methods)</title>
  <!-- 
  在JavaScript中，数组是一种用于存储多个值的对象。

  一、数组字面量
  使用数组字面量是创建数组最常用和最简洁的方法。通过方括号 `[]` 来定义数组，并在其中包含元素。
    let fruits = ['苹果', '香蕉', '橙子'];
    console.log(fruits); // 输出: ["苹果", "香蕉", "橙子"]

  二、数组构造函数
  可以使用 `Array` 构造函数来创建数组。可以通过以下几种方式使用构造函数：
    1. 无参数：创建一个空数组。
      let emptyArray = new Array();
      console.log(emptyArray); // 输出: []

    2. 一个参数：如果传入一个数字，则创建一个指定长度的空数组。
      let arrayWithLength = new Array(5);
      console.log(arrayWithLength); // 输出: [ <5 empty items> ]

    3. 多个参数：传入多个参数时，创建一个包含这些参数的数组。

      let numbers = new Array(1, 2, 3, 4);
      console.log(numbers); // 输出: [1, 2, 3, 4]

  三、 `Array.of()`  方法
  `Array.of()`  方法用于创建一个新数组实例，包含传入的所有参数作为数组元素。
    let arrayFromValues = Array.of(1, 2, 3, 4);
    console.log(arrayFromValues); // 输出: [1, 2, 3, 4]

  四、 `Array.from()`  方法
  `Array.from()`  方法可以从类数组对象或可迭代对象创建一个新的数组实例。
    1. 从字符串创建数组：
      let str = 'hello';
      let charArray = Array.from(str);
      console.log(charArray); // 输出: ['h', 'e', 'l', 'l', 'o']

    2. 从类数组对象创建数组：
      let nodeList = document.querySelectorAll('div'); // 假设页面中有多个div
      let divArray = Array.from(nodeList);
      console.log(divArray); // 输出: [div, div, div, ...]

  五、使用扩展运算符
  扩展运算符 `...` 可以将一个数组或可迭代对象展开为单独的元素，从而创建一个新数组。

    let originalArray = [1, 2, 3];
    let newArray = [...originalArray, 4, 5];
    console.log(newArray); // 输出: [1, 2, 3, 4, 5]

  总结
  1. 数组字面量：使用 `[]` 来创建数组，最常用。
  2. 数组构造函数：使用 `new Array()` 来创建数组，可以指定长度或元素。
  3.  `Array.of()` ：创建包含指定元素的新数组。
  4.  `Array.from()` ：从类数组对象或可迭代对象创建数组。
  5. 扩展运算符：可以将一个数组展开为单独的元素，用于创建新数组。
   -->
</head>
<body>

  <script>
    // 1. 数组字面量
    let numbers = [1, 2, 3, 4];
    console.log("1. 数组字面量", numbers); // 输出: [1, 2, 3, 4]

    // 2. 数组构造函数
    let emptyArray = new Array();
    let arrayWithLength = new Array(5); // 创建一个长度为5的空数组
    let arrayWithElements = new Array(1, 2, 3); // 创建一个包含1, 2, 3的数组
    console.log("2. 数组构造函数", emptyArray); // 输出: []
    console.log("2. 数组构造函数", arrayWithLength); // 输出: [empty × 5]
    console.log("2. 数组构造函数", arrayWithElements); // 输出: [1, 2, 3]
    

    // 3. `Array.of()` 方法
    let arrayFromValues = Array.of(1, 2, 3, 4);
    console.log("2. 数组构造函数", arrayFromValues); // 输出: [1, 2, 3, 4]

    // 4. `Array.from()` 方法
    let arrayLikeObject = {
      0: "a",
      1: "b",
      2: "c",
      length: 3
    };
    let arrayFromArrayLike = Array.from(arrayLikeObject);
    console.log("4. `Array.from()` 方法", arrayFromArrayLike); // 输出: ['a', 'b', 'c']

    let str = 'hello';
    let charArray = Array.from(str);
    console.log("4. `Array.from()` 方法", charArray); // 输出: ['h', 'e', 'l', 'l', 'o']

    // 5. 扩展运算符
    let arrayFromSpread = [...[1, 2, 3], ...[4, 5, 6]];
    console.log("5. 扩展运算符", arrayFromSpread); // 输出: [1, 2, 3, 4, 5, 6]
    
  </script>
  
</body>
</html>